<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'主页-写作突破-亮点句型'"> </Breadcrumb>
        <RouterTabs :list="routerList" :current="2"> </RouterTabs>
        <view class="content">
          <view class="box">
            <view class="left">
              <CompositionList
                @select="handleCompositionSelect"
              ></CompositionList>
            </view>
            <view class="right">
              <view class="tabs" v-show="show">
                <view class="tabs_item active">
                  <text>亮点句型</text>
                </view>
              </view>
              <view class="title" v-show="!show">
                <template
                  v-if="
                    category === '1' ||
                    category === '2' ||
                    category === '3' ||
                    category === '4'
                  "
                >
                  <text @click="handleBack()">亮点单词</text>
                  <view class="title_icon">
                    <u-icon
                      name="arrow-right"
                      color="#999999"
                      size="42"
                    ></u-icon>
                  </view>
                  <text class="active" v-if="category === '1'"
                    >查看亮点句型</text
                  >
                  <text class="active" v-else-if="category === '2'"
                    >句型训练</text
                  >
                  <text class="active" v-else-if="category === '3'"
                    >备忘录</text
                  >
                  <text class="active" v-else-if="category === '4'"
                    >错题本</text
                  >
                </template>
              </view>
              <view class="section" v-show="show">
                <view class="category">
                  <view
                    class="category_item"
                    @click="handleChangeCategory('1')"
                  >
                    <view class="category_text"> 亮点句型 </view>
                  </view>
                  <view
                    class="category_item"
                    @click="handleChangeCategory('2')"
                  >
                    <view class="category_text"> 句型训练 </view>
                  </view>
                  <view
                    class="category_item"
                    @click="handleChangeCategory('3')"
                  >
                    <view class="category_text"> 错题本 </view>
                  </view>
                  <view
                    class="category_item"
                    @click="handleChangeCategory('4')"
                  >
                    <view class="category_text"> 备忘录 </view>
                  </view>
                </view>
              </view>
              <view class="detail" v-show="!show">
                <template v-if="category === '1'">
                  <view class="table">
                    <u-table
                      bg-color="rgba(39, 191, 241, 0.3)"
                      border-color="#ffffff"
                      font-size="36"
                      color="#ffffff"
                      padding="0 0"
                    >
                      <u-tr width="50%">
                        <u-th>词汇</u-th>
                        <u-th>中文释义</u-th>
                      </u-tr>
                      <u-tr
                        width="50%"
                        v-for="(item, index) in sentenceList"
                        :key="index"
                      >
                        <u-td>
                          <view
                            style="
                              width: 100%;
                              display: flex;
                              justify-content: center;
                              align-items: center;
                            "
                            @click="playSentence(item)"
                          >
                            <u-icon
                              name="volume-up"
                              color="#ffffff"
                              size="48"
                            ></u-icon>
                            <text
                              style="
                                width: auto;
                                padding-left: 12rpx;
                                padding-right: 0;
                              "
                            >
                              {{ item.sentenceEnglish }}
                            </text>
                          </view>
                        </u-td>
                        <u-td>{{ item.sentenceChinese }}</u-td>
                      </u-tr>
                    </u-table>
                  </view>
                </template>
                <template
                  v-if="
                    category === '2' || category === '3' || category === '4'
                  "
                >
                  <view class="info">
                    <view class="select">
                      <view
                        class="select_content"
                        @click="trainTypeShow = true"
                      >
                        <text>{{ trainType | trainTypeFilter }}</text>
                        <view class="select_icon">
                          <u-icon
                            name="arrow-down-fill"
                            color="#ffffff"
                            size="28"
                          ></u-icon>
                        </view>
                      </view>
                      <u-select
                        v-model="trainTypeShow"
                        mode="single-column"
                        :list="trainTypeList"
                        @confirm="handleChangeTrainType"
                      ></u-select>
                    </view>
                    <view class="text" v-show="trainType === '1'">
                      看下面中文按正确顺序点击英文使排序正确。
                    </view>
                    <view class="text" v-show="trainType === '2'">
                      点击音频播放英文,然后按正确顺序点击英文使排序正确
                    </view>
                    <view class="time">
                      <view class="time_img">
                        <image
                          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/time.png"
                          mode="widthFix"
                        ></image>
                      </view>
                      <view class="time_number">
                        {{ minuteNumber }}:{{ secondNumber }}
                      </view>
                    </view>
                    <view class="switch">
                      <text>+备忘 </text>
                      <view class="switch_content">
                        <u-switch
                          v-model="value"
                          size="36"
                          active-color="#78CCFF"
                          inactive-color="#DDDDDD"
                          @change="switchChange(value)"
                        ></u-switch>
                      </view>
                    </view>
                  </view>
                  <view class="sentence">
                    <SentenceTrain
                      v-if="componentKey > 0"
                      ref="sentenceTrain"
                      :key="componentKey"
                      :list="list"
                      :type="trainType"
                      :sentenceType="sentenceType"
                      @choice="handleChoiceList"
                      @save="handleSaveRec"
                      @check="handleCheckSentence"
                    ></SentenceTrain>
                  </view>
                </template>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getStore } from "@/libs/storage";
import {
  getSentenceList,
  insertSentenceWrong,
  checkSentenceMemo,
  getSentenceMemoList,
} from "@/api/composition";
const englishAudioContext = uni.createInnerAudioContext();
englishAudioContext.autoplay = true;
export default {
  components: {},
  filters: {
    trainTypeFilter(status) {
      const statusMap = {
        1: "看中文选择",
        2: "听英文选择",
      };
      return statusMap[status];
    },
  },
  computed: {
    sentenceType() {
      if (this.category === "2" || this.category === "3") {
        return "normal";
      } else if (this.category === "4") {
        return "error";
      }
      return "";
    },
  },
  onShow() {
    this.show = true;
  },
  onLoad() {},
  data() {
    return {
      routerList: [
        {
          name: "攻略/模版",
          url: "pages/composition/compositionStrategy",
        },
        {
          name: "点亮单词/短语",
          url: "pages/composition/compositionPhrase",
        },
        {
          name: "亮点句型",
          url: "pages/composition/compositionSentence",
        },
        {
          name: "学习报告",
          url: "pages/composition/compositionReport",
        },
      ],
      period: getStore({
        name: "composition_period",
      }),
      compositionItem: {},
      show: true,
      category: "",
      sentenceList: [],
      trainType: "1",
      trainTypeShow: false,
      trainTypeList: [
        {
          value: "1",
          label: "看中文选择",
        },
        {
          value: "2",
          label: "听英文选择",
        },
      ],
      second: 0,
      minute: 0,
      secondNumber: "",
      minuteNumber: "",
      timerId: null,
      value: false,
      list: [],
      componentKey: 0,
    };
  },
  methods: {
    initData() {
      clearInterval(this.timerId);
      this.second = 0;
      this.minute = 0;
      this.secondNumber = "";
      this.minuteNumber = "";
      this.trainType = "1";
      this.componentKey = 0;
      this.componentKey = 0;
      this.componentKey3 = 0;
    },
    handleCompositionSelect(item) {
      this.compositionItem = item;
      this.show = true;
      this.category = "";
    },
    handleChangeCategory(category) {
      this.show = false;
      this.category = category;
      this.initData();
      if (category === "1") {
        this.getList1();
      } else if (category === "2" || category === "3" || category === "4") {
        this.initData();
        this.timer();
        if (category === "2") {
          this.getList2();
        }
        if (category === "3") {
          this.getList3(1);
        }
        if (category === "4") {
          this.getList3(2);
        }
      }
    },
    async getSentence() {
      let params = {
        typeId: this.compositionItem.id,
      };
      await getSentenceList(params).then((res) => {
        this.sentenceList = res.data;
      });
    },
    async getSentenceMemo(type) {
      let params = {
        typeId: this.compositionItem.id,
        cate: type,
      };
      await getSentenceMemoList(params).then((res) => {
        this.sentenceList = res.data;
      });
    },
    getList1() {
      this.getSentence();
    },
    getList2() {
      this.getSentence().then(() => {
        this.list = JSON.parse(JSON.stringify(this.sentenceList));
        this.componentKey++;
      });
    },
    getList3(type) {
      this.getSentenceMemo(type).then(() => {
        this.list = JSON.parse(JSON.stringify(this.sentenceList));
        this.componentKey++;
      });
    },
    playSentence(row) {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = row.sentenceAudio;
      englishAudioContext.play();
    },
    handleBack() {
      this.show = true;
      this.category = "";
    },
    handleChangeTrainType(e) {
      if (e[0].value === this.trainType) return;
      this.trainType = e[0].value;
    },
    switchChange() {
      this.$refs.sentenceTrain.handleInsertSentence();
    },
    timer() {
      this.timerId = setInterval(() => {
        this.second++;
        if (this.second > 59) {
          this.second = 0;
          this.minute++;
        }
        if (this.second < 10) {
          this.secondNumber = this.second.toString().padStart(2, "0");
        } else {
          this.secondNumber = this.second.toString();
        }
        if (this.minute < 10) {
          this.minuteNumber = this.minute.toString().padStart(2, "0");
        } else {
          this.minuteNumber = this.minute.toString();
        }
      }, 1000);
    },
    handleChoiceList() {
      if (this.sentenceType === "normal") {
        let list = [];
        this.list.forEach((item) => {
          if (!item.isCorrect) {
            this.$set(item, "isCorrect", undefined);
            list.push(item);
          }
        });
        if (list.length === 0) {
          this.list = JSON.parse(JSON.stringify(this.sentenceList));
        } else {
          this.list = list;
        }
        if (this.category === "1") {
          return;
        } else if (
          this.category === "2" ||
          this.category === "3" ||
          this.category === "4"
        ) {
          this.componentKey++;
        }
      } else {
        this.getList3(2);
      }
    },
    handleSaveRec(id) {
      let params = {
        sentenceId: id,
      };
      insertSentenceWrong(params);
    },
    handleCheckSentence(id) {
      let params = {
        sentenceId: id,
      };
      checkSentenceMemo(params).then((res) => {
        this.value = res.data;
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "./compositionSentence";
</style>
